<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-image"
		:class="_classes"
		:style="_styles"
		:hover-class="hoverClass"
		@tap="_handleClick"
	>
		<!-- 图片 -->
		<image
			class="pure-image__image"
			:src="src"
			:mode="mode"
			:lazy-load="lazyLoad"
			:fade-show="fadeShow"
			:webp="webp"
			:show-menu-by-longpress="showMenuByLongpress"
			:draggable="draggable"
			@load="_onLoad"
			@error="_onError"
		/>

		<!-- 占位图 -->
		<image
			class="pure-image__placeholder"
			:src="placeholder"
			:mode="mode"
			:lazy-load="lazyLoad"
			:fade-show="fadeShow"
			:webp="webp"
			:show-menu-by-longpress="showMenuByLongpress"
			:draggable="draggable"
			v-if="_status !== 'success' && placeholder"
		/>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, useAttrs } from "vue";
	import props from "./props";

	// 加载状态
	const _status = ref("loading");

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onLoad", "onError", "onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 加载状态
		array.push(`pure-image--${_status.value}`);

		// 圆形图片
		if (_props.circle) array.push("pure-image--circle");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 宽高
		if (_props.width) array.push(`--pure-image-width: ${_props.width};`);
		if (_props.height) array.push(`--pure-image-height: ${_props.height};`);

		return array;
	});

	// 加载成功事件
	function _onLoad(event) {
		// 更新状态
		_status.value = "success";

		// 触发加载成功事件
		_emits("onLoad", event);
	}

	// 加载失败事件
	function _onError(event) {
		// 更新状态
		_status.value = "error";

		// 触发加载失败事件
		_emits("onError", event);
	}

	// 点击预览
	function _handleClick() {
		if (_props.preview) {
			uni.previewImage({
				current: _props.src,
				urls: _props?.urls?.length ? _props.urls : [_props.src]
			});
		}
		// 触发点击事件
		_emits("onClick");
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
